<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="header-top">
          <div class="back-icon" @click="handleBack">
            <Icon icon="mdi:arrow-left"/>
          </div>
          <div class="page-title">WP广告</div>
          <div class="placeholder"></div>
        </div>
      </div>

      <!-- 筛选选项卡 -->
      <div class="tab-container">
        <div
          class="tab-scroll"
          ref="tabScroll"
          @scroll="checkScroll"
          @wheel.prevent="handleWheel"
        >
          <div
            v-for="tab in tabs"
            :key="tab.value"
            :class="['tab-item', { active: activeTab === tab.value }]"
            @click="switchTab(tab.value)"
          >
            {{ tab.label }}
          </div>
        </div>
      </div>

      <!-- 搜索框 -->
      <div class="search-section">
        <div class="search-input-group">
          <Icon icon="mdi:magnify" class="search-icon" />
          <input
            v-model="searchAmount"
            type="number"
            class="search-input"
            placeholder="请输入数量"
            @keyup.enter="handleSearch"
          >
          <button class="search-btn" @click="handleSearch">搜索</button>
        </div>
      </div>

      <!-- 广告列表容器 -->
      <div class="list-container">
        <div class="ad-list" ref="listContainer">
          <div
            class="ad-item"
            v-for="ad in currentAds"
            :key="ad.id"
          >
            <div class="wp-amount">{{ ad.amount }} WP</div>
            <div class="publisher-avatar">
              <img :src="ad.avatar" alt="发布人头像" class="avatar-img">
            </div>
            <div class="payment-methods">
              <Icon
                v-for="method in ad.paymentMethods"
                :key="method"
                :icon="getPaymentIcon(method)"
                class="payment-icon"
                :class="method"
              />
            </div>
            <div class="ad-time">{{ ad.time }}</div>
            <button class="transfer-btn" @click="showTransferDialog(ad)">转让</button>
          </div>

          <!-- 加载指示器 -->
          <div class="loader-box" ref="loader">
            <div class="loader" :class="{ hidden: !loading }"></div>
            <div class="nothing" :class="{ hidden: hasMore }">没有更多了~</div>
          </div>

          <!-- 空状态 -->
          <div class="empty-state" v-if="currentAds.length === 0 && !loading">
            <Icon icon="mdi:file-document-outline" class="empty-icon"/>
            <p class="empty-text">暂无广告记录</p>
          </div>
        </div>
      </div>

      <!-- 转让弹窗 -->
      <div v-if="showTransfer" class="custom-dialog-mask" @click="showTransfer = false">
        <div class="custom-dialog transfer-dialog" @click.stop>
          <div class="dialog-header">
            <h3>转让WP</h3>
            <span class="close-btn" @click="showTransfer = false">×</span>
          </div>
          <div class="dialog-body">
            <div class="transfer-section">
              <h4 class="section-title">需求数量</h4>
              <div class="demand-info">
                <div class="demand-item">
                  <span class="demand-label">需求数量</span>
                  <div class="demand-value">
                    <span class="amount">{{ currentAd.amount }} WP</span>
                  </div>
                </div>
                <div class="demand-item">
                  <span class="demand-label">总意向值</span>
                  <div class="demand-value">
                    <span class="price">100</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="transfer-section">
              <h4 class="section-title">可用额度</h4>
              <div class="balance-info">
                <div class="balance-item">
                  <span class="balance-label">WP</span>
                  <span class="balance-value">0</span>
                </div>
                <div class="balance-item">
                  <span class="balance-label">商家WP</span>
                  <span class="balance-value">0</span>
                </div>
              </div>
            </div>

            <div class="transfer-section">
              <h4 class="section-title">转让方式</h4>
              <div class="transfer-method">
                <h5 class="method-title">二级密码</h5>
                <div class="password-input-wrapper">
                  <input
                    v-model="secondaryPassword"
                    :type="showPassword ? 'text' : 'password'"
                    class="password-input"
                    placeholder="请输入二级密码"
                  >
                  <div class="password-toggle" @click="showPassword = !showPassword">
                    <Icon :icon="showPassword ? 'mdi:eye-off' : 'mdi:eye'" class="toggle-icon"/>
                  </div>
                </div>
              </div>
            </div>

            <div class="transfer-actions">
              <button class="cancel-btn" @click="showTransfer = false">取消</button>
              <button
                class="confirm-btn"
                :class="{ disabled: !canTransfer }"
                :disabled="!canTransfer"
                @click="handleTransfer"
              >
                匹配
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue2'

export default {
  name: 'WpAdPage',
  components: {
    Icon
  },
  data() {
    return {
      activeTab: 'all',
      searchAmount: '',
      loading: false,
      loadLock: false,
      hasMore: true,
      showTransfer: false,
      showPassword: false,
      secondaryPassword: '',
      currentAd: null,
      tabs: [
        { label: '全部', value: 'all' },
        { label: '1-100', value: '1-100' },
        { label: '101-1000', value: '101-1000' },
        { label: '1001-2000', value: '1001-2000' }
      ],
      allAds: [
        {
          id: 1,
          amount: 1560,
          time: '2025-11-05 10:50:05',
          paymentMethods: ['wechat', 'alipay'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 2,
          amount: 91,
          time: '2025-11-05 10:50:04',
          paymentMethods: ['wechat'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 3,
          amount: 500,
          time: '2025-11-05 10:50:03',
          paymentMethods: ['alipay', 'bank'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 4,
          amount: 1200,
          time: '2025-11-05 10:45:22',
          paymentMethods: ['bank'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 5,
          amount: 80,
          time: '2025-11-05 10:40:15',
          paymentMethods: ['wechat', 'alipay', 'bank'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 6,
          amount: 1500,
          time: '2025-11-05 10:35:08',
          paymentMethods: ['alipay'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 7,
          amount: 300,
          time: '2025-11-05 10:30:45',
          paymentMethods: ['wechat', 'bank'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 8,
          amount: 1800,
          time: '2025-11-05 10:25:33',
          paymentMethods: ['wechat'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 9,
          amount: 50,
          time: '2025-11-05 10:20:19',
          paymentMethods: ['alipay'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 10,
          amount: 2000,
          time: '2025-11-05 10:15:27',
          paymentMethods: ['wechat', 'alipay'],
          avatar: require('../../../assets/images/Logo.png')
        },
        {
          id: 11,
          amount: 500,
          time: '2025-11-05 10:12:19',
          paymentMethods: ['alipay'],
          avatar: require('../../../assets/images/Logo.png')
        },
      ],
      ads: []
    }
  },
  computed: {
    currentAds() {
      return this.ads
    },
    canTransfer() {
      return this.secondaryPassword.length >= 6
    }
  },
  mounted() {
    this.loadAds()
    this.$nextTick(() => {
      this.setupObserver()
      this.setupTouchScroll()
    })
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect()
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },

    handleSearch() {
      console.log('搜索数量:', this.searchAmount)
      this.ads = []
      this.loadAds()
    },

    getPaymentIcon(method) {
      const icons = {
        wechat: 'mdi:wechat',
        alipay: 'ri:alipay-fill',
        bank: 'mdi:credit-card'
      }
      return icons[method]
    },

    switchTab(tab) {
      this.activeTab = tab
      this.ads = []
      this.loadAds()
    },

    checkScroll() {
      const scrollEl = this.$refs.tabScroll
      if (scrollEl) {
        this.showLeftScroll = scrollEl.scrollLeft > 0
        this.showRightScroll = scrollEl.scrollLeft < (scrollEl.scrollWidth - scrollEl.clientWidth)
      }
    },

    handleWheel(event) {
      const scrollEl = this.$refs.tabScroll
      if (scrollEl) {
        scrollEl.scrollLeft += event.deltaY
      }
    },

    setupTouchScroll() {
      const scrollEl = this.$refs.tabScroll
      if (!scrollEl) return

      let isDragging = false
      let startX
      let scrollLeft

      scrollEl.addEventListener('mousedown', (e) => {
        isDragging = true
        startX = e.pageX - scrollEl.offsetLeft
        scrollLeft = scrollEl.scrollLeft
        scrollEl.style.cursor = 'grabbing'
        scrollEl.style.userSelect = 'none'
      })

      scrollEl.addEventListener('mouseleave', () => {
        isDragging = false
        scrollEl.style.cursor = 'grab'
      })

      scrollEl.addEventListener('mouseup', () => {
        isDragging = false
        scrollEl.style.cursor = 'grab'
        scrollEl.style.userSelect = 'auto'
      })

      scrollEl.addEventListener('mousemove', (e) => {
        if (!isDragging) return
        e.preventDefault()
        const x = e.pageX - scrollEl.offsetLeft
        const walk = (x - startX) * 2
        scrollEl.scrollLeft = scrollLeft - walk
      })

      scrollEl.addEventListener('touchstart', (e) => {
        isDragging = true
        startX = e.touches[0].pageX - scrollEl.offsetLeft
        scrollLeft = scrollEl.scrollLeft
      })

      scrollEl.addEventListener('touchmove', (e) => {
        if (!isDragging) return
        const x = e.touches[0].pageX - scrollEl.offsetLeft
        const walk = (x - startX) * 2
        scrollEl.scrollLeft = scrollLeft - walk
      })

      scrollEl.addEventListener('touchend', () => {
        isDragging = false
      })
    },

    setupObserver() {
      const loader = this.$refs.loader
      if (!loader) return

      this.observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting && !this.loadLock && this.hasMore) {
            this.loadAds()
          }
        },
        {
          root: this.$refs.listContainer,
          rootMargin: '0px',
          threshold: 0.1
        }
      )

      this.observer.observe(loader)
    },

    loadAds() {
      if (this.loadLock || !this.hasMore) return

      this.loadLock = true
      this.loading = true

      setTimeout(() => {
        const currentLength = this.ads.length
        const nextItems = this.allAds.slice(currentLength, currentLength + 10)

        if (nextItems.length === 0) {
          this.hasMore = false
          this.loading = false
          this.loadLock = false
          return
        }

        this.ads = [...this.ads, ...nextItems]
        this.hasMore = this.ads.length < this.allAds.length
        this.loading = false
        this.loadLock = false
      }, 800)
    },

    showTransferDialog(ad) {
      this.currentAd = ad
      this.showTransfer = true
      this.secondaryPassword = ''
    },

    handleTransfer() {
      if (!this.canTransfer) return

      console.log('转让WP:', {
        ad: this.currentAd,
        password: this.secondaryPassword
      })

      alert('转让申请已提交')
      this.showTransfer = false
    }
  }
}
</script>

<style scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.placeholder {
  width: 36px;
}

.tab-container {
  position: relative;
  background: white;
  padding: 0 20px;
  border-bottom: 1px solid #f0f0f0;
}

.tab-scroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 12px 0;
  cursor: grab;
  scroll-behavior: smooth;
}

.tab-scroll:active {
  cursor: grabbing;
}

.tab-scroll::-webkit-scrollbar {
  display: none;
}

.tab-item {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border-radius: 16px;
  margin-right: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tab-item:hover {
  background: #f5f5f5;
}

.tab-item.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.search-section {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.search-input-group {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
}

.search-icon {
  font-size: 20px;
  color: #999;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}

.search-input::placeholder {
  color: #999;
}

.search-btn {
  padding: 8px 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: #5a6fd8;
}

.list-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ad-list {
  height: 500px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.ad-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: white;
  position: relative;
  min-height: 100px;
}

.wp-amount {
  position: absolute;
  top: 16px;
  left: 15px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.publisher-avatar {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #f0f0f0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.payment-methods {
  position: absolute;
  bottom: 30px;
  left: 15px;
  display: flex;
  gap: 8px;
}

.payment-icon {
  font-size: 28px;
  padding: 4px;
  border-radius: 4px;
}

.payment-icon.wechat {
  color: #07C160;
  //background: rgba(7, 193, 96, 0.1);
}

.payment-icon.alipay {
  color: #1677FF;
  //background: rgba(22, 119, 255, 0.1);
}

.payment-icon.bank {
  color: #722ED1;
  //background: rgba(114, 46, 209, 0.1);
}

.ad-time {
  position: absolute;
  bottom: 10px;
  left: 15px;
  font-size: 12px;
  color: #999;
}

.transfer-btn {
  position: absolute;
  right: 10px;
  bottom: 12px;
  padding: 6px 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.transfer-btn:hover {
  background: #5a6fd8;
}

.loader-box {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loader {
  width: 25px;
  height: 25px;
  border: 3px solid #ddd;
  border-radius: 50%;
  border-bottom: 3px solid #717171;
  transform: rotate(0deg);
  animation: loading 1s linear infinite;
}

.nothing {
  font-size: 14px;
  color: #999;
}

.hidden {
  display: none;
}

@keyframes loading {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  margin: 0;
}

/* 转让弹窗样式 */
.custom-dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 20px;
  animation: fadeIn 0.3s ease;
}

.transfer-dialog {
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.dialog-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: #666;
  background: #f5f5f5;
  border-radius: 50%;
}

.dialog-body {
  padding: 20px;
}

.transfer-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.demand-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.demand-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.demand-item:last-child {
  margin-bottom: 0;
}

.demand-label {
  font-size: 14px;
  color: #666;
}

.demand-value {
  display: flex;
  align-items: center;
  gap: 12px;
}

.amount {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.price {
  font-size: 14px;
  color: #999;
}

.balance-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.balance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.balance-item:last-child {
  margin-bottom: 0;
}

.balance-label {
  font-size: 14px;
  color: #666;
}

.balance-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.transfer-method {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.method-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.password-input {
  width: 100%;
  height: 44px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.password-input:focus {
  border-color: #667eea;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper .password-input {
  width: 100%;
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-icon {
  font-size: 18px;
  transition: all 0.3s ease;
}

.password-toggle:hover .toggle-icon {
  color: #667eea;
}

.transfer-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-btn:hover {
  background: #e5e5e5;
}

.confirm-btn {
  background: #667eea;
  color: white;
}

.confirm-btn:hover:not(.disabled) {
  background: #5a6fd8;
}

.confirm-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }

  .transfer-dialog {
    width: 280px;
  }
}
</style>
